<template>
    <div class="body">
        <van-radio-group v-model="form.role_type" direction="horizontal" checked-color="#3DCEB9" @change="()=>{form.group_name=''}">
            <div class="isBoss-options" :class="form.role_type==1?'selected':''">
                <van-radio :name="1">我是老板</van-radio>
            </div>
            <div class="isBoss-options" :class="form.role_type==2?'selected':''">
                <van-radio :name="2">我是员工</van-radio>
            </div>
        </van-radio-group>
        <input type="text" class="input-content" v-model="form.group_name" v-if="form.role_type == 1?true:false" placeholder="请输入公司名称"/>
        <input type="text" class="input-content" v-model="form.group_name" v-else @click="()=>{showPicker = !showPicker}" readonly placeholder="选择所属公司">
        <van-button round color="#3DCEB9" size="large" @click="register">确认</van-button>
        <van-popup v-model="showPicker" round position="bottom">
            <van-picker
                title="选择公司"
                show-toolbar
                value-key="name"
                :columns="columns"
                @confirm="onConfirm"
                @cancel="()=>{showPicker = !showPicker}"
            />
        </van-popup>
    </div>
</template>
<script>
import {CompanyList,ChoiceCompany} from '../ajax'
import {Notify, Toast} from 'vant'
export default {
    data() {
        return {
            columns: [],
            form:{
                role_type:1,
                group_name:''
            },
            showPicker:false
        }
    },
    created(){
        this.getCompanyList();
    },
    methods:{
        getCompanyList(){
            CompanyList().then(res=>{
                // console.log(res);
                this.columns = res.list;
            })
        },
        onConfirm(item){    
            console.log(item);
            this.form.group_name = item.name
            this.showPicker = !this.showPicker
        },
        register(){
            const {form} = this;
            if(!form.group_name){
                
                if(form.role_type == 1){
                    Notify({ type: 'danger', message: '请填写公司名称' });
                }else{
                    Notify({ type: 'danger', message: '请选择所属公司' });
                }
                return false;
            }
            console.log(this.$store.getters.wxUserInfo);
            let userInfo = this.$store.getters.wxUserInfo;
            const data = {
                openid:userInfo.openid,
                group_name:form.group_name,
                role_type:form.role_type,
            }
            ChoiceCompany(data).then(res=>{
                Toast('绑定成功,即将跳转首页');
                this.$router.push('/');
            })

        }
    }
}
</script>
<style lang="scss" scoped>
    $green:#3DCEB9;
    .body{
        width: 80%;
        margin: 10rem auto;
        .isBoss-options{
            width: 38%;
            padding: 0.4rem 1rem;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .selected{
            border-color: $green;
            >>> .van-radio__label{
                color: $green;
            }
        }
        .van-radio-group{
            display: flex;
            justify-content: space-between;
        }
    }
</style>